@(verkefniHopsForm: Form[models.data.verkefnihops], courses: List[models.general.vKennariHoparOnn], assignment: models.data.Verkefni,
notandiId: String, vNem: List[List[models.general.vNemandiAfangarOnn]], afangaNafn: String)
@teacherMain(title = "Nýtt Verkefni") {

    <link rel="stylesheet" href="/public/stylesheets/bootstrap-datetimepicker.min.css">
    <script src="/public/javascripts/bootstrap-datetimepicker.min.js"></script>
    <script src="/public/javascripts/createAssignment.js"></script>

    <div class="container">
        <div class="row">
            <div class="span6">

                <ul class="breadcrumb">
                    <li>Búa til verkefni <span class="divider">/</span></li>
                    <li>Velja spurningar<span class="divider">/</span></li>
                    <li class="active">Leggja verkefni fyrir hóp<span class="divider">/</span></li>
                    <li>Lokið<li>
                </ul>

                <div class="span3">
                    @helper.form(action = routes.TeacherController.submitAssignmentToGroup(assignment.verkefni_id), 'class -> "form-horizontal") {
                        <fieldset>
                            <div id="legend" class="">
                                <legend class="" style="font-size: 20pt">Leggja  <span style="font-weight:bold">@assignment.heiti</span> fyrir hóp í @afangaNafn</legend>
                            </div>

                            <input type="hidden" value="@{notandiId}" name="kennari_id" />
                            <input type="hidden" value="@{assignment.verkefni_id}" name="verkefni_id" />
                            <input type="hidden" value="@assignment.afangi_id" name="afangi_id" />

                            <div class="control-group">
                                <label class="control-label"> Hópur </label>

                                <div class="controls">

                                    <select onclick="selected()" id="select1" class="input span6" name="hopur_id">
                                        @for(course <- courses){
                                            <option onclick="selected()" id="@course.hopur_id" value="@course.hopur_id">@course.hopur</option>
                                        }
                                    </select>
                                </div>
                            </div>

                            <div class="control-group">
                                <a href="#myModal" role="button" class="btn pull-right" data-toggle="modal" title="Ef ekki á að leggja verkefnið fyrir allan hópinn er hægt að velja ákveðna nemendur úr honum og skrá verkefnið aðeins á þá einstaklinga">Velja nemendur úr hópnum</a>
                                    <!-- Modal -->
                                <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h3 id="myModalLabel">Veldu staka nemendur úr hóp</h3>
                                    </div>
                                    <div class="modal-body" >
                                        <a href="#" onclick="afvelja()">Velja enga nemendur</a>
                                        <a href="#" style="margin-left: 4px" onclick="velja()">Velja alla nemendur</a>
                                        <p></p>


                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Staðfesta</button>
                                        <button class="btn" data-dismiss="modal" aria-hidden="true">Hætta við</button>
                                    </div>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label"> Hversu margir nemendur mega skila verkefni saman</label>
                                <div class="controls">
                                    <input type="number" name="hopskil" value="1" min="1" max="10" class="span6" />
                                </div>
                            </div>


                            <div class="control-group">
                                <label class="control-label"> Setja Fyrir </label>
                                <div class="controls">
                                    <div id="datetimepicker1" class="input-append date">
                                        <input data-format="dd-MM-yyyy hh:mm:ss" type="text" name="upphafsdagsetning" class="span6"></input>
                                        <span class="add-on">
                                            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                                            </i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label"> Skiladagsetning </label>
                                <div class="controls">
                                    <div id="datetimepicker2" class="input-append date">
                                        <input data-format="dd-MM-yyyy hh:mm:ss" type="text" name="lokadagsetning" class="span6"></input>
                                        <span class="add-on">
                                            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                                            </i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <script>
                                    function person(nafner, notandiId,hopurId){
                                    this.nafner = nafner;
                                    this.notandiId = notandiId;
                                    this.hopurId = hopurId;
                                    }
                                    var arr = [];

                                    var tuminn = [];
                                    @for(nem <- vNem){
                                        @for(n <- nem){
                                            arr.push(new person("@n.nafn", "@n.notandi_id", "@n.hopur_id"));
                                        }
                                    }



                                    $(document).ready(function(){
                                    selected();
                                    });

                                    var tum = 0;
                                    if(tum != 1){
                                    function selected(){

                                    $("p").empty();
                                    var temp = [];

                                    var hopurid = document.getElementById("select1").value;
                                    for(var k in arr){
                                    if(hopurid == arr[k].hopurId){
                                    temp.push(arr[k]);
                                    }
                                    }
                                    for(var i in temp){
                                    $("p").append('<tr><td><input type="checkbox" checked class="valinn"name="nemendur" value="'+temp[i].notandiId+'">' + temp[i].nafner + '</td></tr>');

                                    }


                                    }
                                    }

                                    function afvelja(){
                                    $('.valinn').removeAttr('checked');
                                    }
                                    function velja(){
                                    //$('.valinn').attr('checked','checked');
                                    $(':checkbox').each(function() {
                                    this.checked = true;
                                    });
                                    }


                            </script>


                            <div class="control-group">
                                <label class="control-label">Athugasemd til nemenda</label>
                                <div class="controls">
                                    <textarea class="input span6" name="athugasemd"></textarea>
                                </div>
                            </div>

                            <div class="control-group">
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary" value="submit">Leggja verkefni fyrir</button>
                                    <a href="@routes.TeacherController.teacherDashboard()" ><input type="button" class="btn" title ="Leggja verkefni fyrir síðar" value="Geyma verkefni" /></a>
                                </div>
                            </div>
                        </fieldset>
                    }
                </div>
            </div>  <!--span6-->
        </div> <!-- row -->
    </div> <!-- /container -->
}